<template>
  <el-form
    :model="form"
    :rules="rules"
    ref="form"
    label-width="100px"
    class="user-form"
  >
    <el-form-item label="头像" prop="avatar">
      <el-upload
        class="avatar-uploader"
        action="/upload/avatar"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="form.avatar" :src="form.avatar" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
    <el-form-item label="昵称" prop="nickname" required>
      <el-input v-model="form.nickname"> </el-input>
    </el-form-item>
    <el-form-item label="个性签名" prop="introl">
      <el-input v-model="form.intro"> </el-input>
    </el-form-item>

    <el-form-item label="性别">
      <el-radio-group v-model="form.gender">
        <el-radio :label="1">男</el-radio>
        <el-radio :label="0">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="生日">
      <el-date-picker v-model="form.birthday"></el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button @click="reset">取消</el-button>
    </el-form-item>
  </el-form>
</template>
  <script>
import statusCode from "@/commons/statusCode";
import userApi from "@/axios/userApi";
export default {
  data() {
    return {
      
      form: {
        nickname: "",
        intro: "",
        gender: "",
        birthday: "",
        avatar:""
      },
      rules: {
        nickname: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },

  mounted() {
    this.form.nickname = this.userInfo.nickname;
    this.form.intro = this.userInfo.intro;
    this.form.gender = this.userInfo.gender;
    this.form.birthday = this.userInfo.birthday;
    this.form.avatar = this.userInfo.avatar
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleAvatarSuccess(res, file) {
      if (res.code === statusCode.SUCCESS_CODE) {
        this.$message.success("上传成功");
        this.form.avatar = res.data;
      }
    },
    beforeAvatarUpload(file) {
      const acceptTypes = ["image/jpeg", "image/jpg", "image/png"];
      const isJPG = acceptTypes.includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG,jpeg,png 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    onSubmit() {
  
      let user = {}
      for (const key in this.form) {
        if(this.form[key] != this.userInfo[key]) {
          user[key] = this.form[key]
        }
      }
      if(Object.keys(user).length == 0) {
        this.$message.warning("请更改后再保存！")
        return
      }
      user.username = this.userInfo.username
    
      userApi
        .save(user)
        .then(({ data }) => {
            this.$message.success("保存用户信息成功")
            this.updateUser({_this:this});
            window.location.reload()   
        })
     
    },
    reset() {
      this.resetForm(this.$refs.form);
    },
  },
};
</script>

<style  lang="less" >
.user-form {
  .el-input {
    width: 320px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>